import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link } from "react-router-dom";

import { MoonOutlined, SunOutlined } from "@ant-design/icons";
import { Menu, MenuProps, Switch, Flex, Button, Space } from "antd";

import { changeTheme } from "@/store/modules/app";
import { AppDispatch, RootState } from "@/types/store/index";

type MenuItem = Required<MenuProps>["items"][number];
const menuItems: MenuItem[] = [
  {
    label: "首页",
    key: "/",
  },
  {
    label: "文档",
    key: "docment",
  },
  {
    label: "关于",
    key: "about",
  },
];

export default function WebHeaderNavbar() {
  const themeState = useSelector((state: RootState) => state.app.theme);
  const dispatch = useDispatch<AppDispatch>();
  const [themeChecked, setThemeChecked] = useState<boolean>();
  const [menuTheme, setMenuTheme] = useState<ThemeType>("light");

  const onChangeTheme = (checked: boolean) => {
    console.log(checked);
    const theme = checked ? "light" : ("drak" as ThemeType);
    setMenuTheme(theme);
    dispatch(changeTheme(theme));
  };
  useEffect(() => {
    if (themeState) {
      const checked = themeState === "light";
      setThemeChecked(checked);
    }
  }, [themeState]);
  return (
    <section className='web-layout-navbar'>
      <Flex align='center' gap={20}>
        <Menu mode='horizontal' theme={menuTheme} items={menuItems} />
        <Space>
          <Button size='large' type='primary'>
            <Link to='/creator/home' target="blank">创作中心</Link>
          </Button>
        </Space>
        <Switch
          checkedChildren={<SunOutlined></SunOutlined>}
          unCheckedChildren={<MoonOutlined></MoonOutlined>}
          defaultChecked={themeChecked}
          onChange={onChangeTheme}
        />
      </Flex>
    </section>
  );
}
